<template>
	<view :style="{ '--color': vuex_config.themeColor1 }">
		<sww-nav-bar :title="title"></sww-nav-bar>
		<template v-if="searchType == 'info' || searchType == 'prod'">
			<sww-search  :custom-style="{ padding: '12rpx 0' }" @change="searchChange" keyWord="prod" historyKey="prod_search_history" :checkNav="true">
				<view class="scroll_main" v-if="categoryList.length > 0">
					<scroll-view scroll-x class="scroll_box">
						<view
							:class="['cate_item', currentCheckId == item.pk_id ? 'is_check' : '']"
							v-for="(item, index) in categoryList"
							:key="index"
							@click="setCurrentId(index)"
						>
							{{ item.name }}
						</view>
					</scroll-view>
					<view class="show_cate" @click="categoryVisible = true">
						<view class="iconfont iconfont-e742"></view>
						<view>分类</view>
					</view>
				</view>
			</sww-search>
		</template>
		<view class="top_main" :class="[categoryList[0] ? 'has_category_view' : '']" v-else>
			<view class="top_cont" :style="{ 'padding-top': vuex_system.top + 'px' }">
				<view class="search_view"><u-search @clear="$initPage" @custom="$initPage" @search="$initPage" class="search_input" :height="58" placeholder="请输入关键词" v-model="inputName"></u-search></view>
				<view class="scroll_main" v-if="categoryList.length > 0">
					<scroll-view scroll-x class="scroll_box">
						<view
							:class="['cate_item', currentCheckId == item.pk_id ? 'is_check' : '']"
							v-for="(item, index) in categoryList"
							:key="index"
							@click="setCurrentId(index)"
						>
							{{ item.name }}
						</view>
					</scroll-view>
					<view class="show_cate" @click="categoryVisible = true">
						<view class="iconfont iconfont-e742"></view>
						<view>分类</view>
					</view>
				</view>
			</view>
		</view>
		<prod-list v-if="searchType == 'prod'" :dataList="dataList"></prod-list>
		<line-list v-else-if="searchType == 'line'" :dataList="dataList"></line-list>
		<info-list v-else-if="searchType == 'info'" :dataList="dataList"></info-list>
		<bonus-list v-else-if="searchType == 'bonus'" :dataList="dataList"></bonus-list>
		<vip-list v-else-if="searchType == 'vipProd'" :parameter="{layout:layout}" :dataList="dataList"></vip-list>
		<ticket-list v-else-if="searchType == 'ticket'" :dataList="dataList"></ticket-list>
		<hotel-list v-else-if="searchType == 'hotel'" :dataList="dataList"></hotel-list>
		<sww-load-more :params="dataListParams"></sww-load-more>

		<u-popup v-model="categoryVisible" mode="right" width="80%">
			<view :style="{ 'padding-top': vuex_system.top + 'px' }">
				<page-prod-cate ref="prod_view" :firstList="categoryList" :showVisible="categoryVisible" :optionObj="optionObj" @changClass="changClass"></page-prod-cate>
			</view>
		</u-popup>
	</view>
</template>

<script>
import prodList from '@/pagecomponents/prodList/index.vue';
import lineList from '@/pagecomponents/lineList/index.vue';
import informationList from '@/pagecomponents/informationList/index.vue';
import pageProdCate from '@/pagecomponents/pageProdCate/index.vue';
import bonusList from '@/pagecomponents/bonusList/index.vue';
import vipProdList from '@/pagecomponents/vipProdList/index.vue';
import ticketList from '@/pagecomponents/ticket/index.vue';
import hotelList from '@/pagecomponents/hotelList/index.vue';
import { pagingMixin } from '../../mixins/pagingMixin';
import { mapState } from 'vuex';
export default {
	mixins: [pagingMixin],
	components: {
		'page-prod-cate': pageProdCate,
		'prod-list': prodList,
		'line-list': lineList,
		'info-list': informationList,
		'bonus-list': bonusList,
		'vip-list': vipProdList,
		'ticket-list':ticketList,
		'hotel-list':hotelList
	},
	props:{
		tabIndex:{
			type:Number,
			default:0
		}
	},
	computed:{
		...mapState(['vuex_tab_bar'])
	},
	data() {
		return {
			title:'',
			searchType:'prod', // 搜索类型 line
			layout:1,//vip产品布局
			categoryVisible: false,
			inputName: '',
			typeObjOption: {
				prod: {
					checkName: ['one_type', 'two_type'],
					searchType: 1, // 分类的搜索类型
					prodApi: 'GetProductList' // 产品列表api
				},
				line: {
					checkName: ['type'],
					searchType: 4,
					prodApi: 'GetTravelagencyProductList',
					callBack: data => {
						return data.map(item => {
							item.img = item.img ? item.img.split(',')[0] : '';
							item.tag = item.tag ? item.tag.split(',') : [];
							return item;
						});
					}
				},
				info: {
					searchParams:{type:2}, // 一些特定的参数
					checkName: ['common_type'],
					searchType: 11,
					prodApi: 'GetInfotainmentList'
				},
				ticket: {
					checkName: ['one_type','two_type'],
					searchType: 9,
					prodApi: 'GetTicketProList'
				},
				hotel: {
					checkName: ['type'],
					searchType: 3,
					prodApi: 'GetHotelList'
				},
				bonus: {
					checkName: ['type'],
					searchType: 12,
					prodApi: 'GetBonusProList'
				},
				vipProd:{
					checkName: ['type'],
					searchType: 6,
					prodApi: 'GetVipGoodsList'
				}
			},
			optionObj: {},
			currentCategory: {},
			currentCheckId: -1,
			categoryList: []
		};
	},
	methods: {
		// 如果checkName[1],
		$onLoad() {
			let query = this.vuex_tab_bar.list[this.tabIndex].query
			this.title = query.title || this.vuex_tab_bar.list[this.tabIndex].text
			if(query.type){
				this.searchType = query.type
			}
			if(query.layout){
				this.layout = query.layout
			}
			this.optionObj = this.typeObjOption[this.searchType];
			if (!this.optionObj) {
				return;
			}
			if(query.id){
				let index = query.level?(query.level - 1) : 0
				let key = this.optionObj.checkName[index]
				this.currentCategory[key] = {
					pk_id:query.id
				}
			}
			this.$initPage();
			if(!query.id){
				this.initFirstCategory();
			}
		},
		$onReachBottom() {
			this._load_data();
		},
		initFirstCategory() {
			this.$resPost('GetCommonClassify', { type: this.optionObj.searchType, parent_id: 0, page_size: 100 }).then(({ data }) => {
				if (data.length > 0) {
					this.categoryList = [{ name: '全部', pk_id: -1 }];
					this.categoryList = this.categoryList.concat(data);
					this.$refs.prod_view.clickChange({ item: this.categoryList[0], index: 0, isInit: true });
				}
			});
		},
		searchChange (val) {
			this.inputName = val
			this.$initPage()
		},
		// 初始化列表(页面第一次加载由组件反馈加载)
		$initPage() {
			let params = {
				name: this.inputName
			};
			let arr = this.optionObj.checkName;
			arr.forEach(key => {
				if (this.currentCategory[key]) {
					params[key] = this.currentCategory[key].pk_id;
				}
			});
			this._init_data(this.optionObj.prodApi, params);
		},
		changClass(obj) {
			this.currentCategory = obj;
			this.$initPage();
			this.setCurrentId();
		},
		// 设置当前选中项对应的id
		setCurrentId(index) {
			if (index || index === 0) {
				if (this.currentCheckId !== this.categoryList[index].pk_id) {
					this.currentCheckId = this.categoryList[index].pk_id;
					this.$refs.prod_view.clickChange({ item: this.categoryList[index], index: 0 });
				}
			} else {
				let arr = Object.keys(this.currentCategory);
				if (arr[0]) {
					this.currentCheckId = this.currentCategory[arr[0]].pk_id;
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.top_main {
	box-sizing: content-box;
	height: 80rpx;
	&.has_category_view {
		height: 160rpx;
	}
	.top_cont {
		box-sizing: content-box;
		position: fixed;
		top: 0;
		width: 100%;
		left: 0;
		z-index: 10;
	}
}
.search_view {
	background: #fff;
	padding: 0 10rpx 0 30rpx;
	display: flex;
	align-items: center;
	height: 80rpx;
	.search_input {
		flex: 1;
		overflow: hidden;
	}
}
.scroll_main {
	display: flex;
	align-items: center;
	background-color: #fff;
	.scroll_box {
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		.cate_item {
			display: inline-block;
			margin: 0 20rpx;
			line-height: 80rpx;
			position: relative;
			&::after {
				display: none;
				content: '';
				width: 100%;
				height: 6rpx;
				background-color: var(--color);
				border-radius: 4rpx;
				position: absolute;
				bottom: 10rpx;
			}
			&.is_check::after {
				display: block;
			}
		}
	}
	.show_cate {
		display: flex;
		align-items: center;
		line-height: 1;
		padding: 0 10rpx;
		.iconfont {
			color: #000;
			font-weight: bold;
			margin-right: 4rpx;
		}
	}
}
</style>
